<template>
	<template v-if="pageParams.list && pageParams.list.length != 0">
		<view class="b-left-money" v-for="item in pageParams.list" :key="item">
			<!-- 图片如何判断  -->
			<template v-if="item.redeemStatus == 2">
				<image class="writeOff" :src="`${constInfo.srcConst}/lhhy/tcl/writeOff.png`" style="width: 80rpx" mode="widthFix"></image>
			</template>
			<template v-if="item.receiveStatus == 1">
				<image :src="`${constInfo.srcConst}/lhhy/tcl/good.png`" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
				<!-- 	<template v-if="haveOperate(item) == '未领取'">
				</template>
				<template v-else>
					<image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
				</template> -->
			</template>
			<template v-if="item.receiveStatus == 2">
				<image :src="`${constInfo.srcConst}/lhhy/tcl/bad.png`" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
			</template>
			<template v-if="item.receiveStatus == 3">
				<image :src="`${constInfo.srcConst}/lhhy/tcl/bad.png`" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
			</template>
			<template v-if="item.receiveStatus == 4">
				<image :src="`${constInfo.srcConst}/lhhy/tcl/good.png`" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
			</template>

			<!-- <image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image> -->
			<view class="money-content">
				<!-- 四种产品 需要判断 1 立减金 2 虚拟会员 3 停车券 4 加油卷 -->
				<view class="content-left">
					<template v-if="item.equityType == 1">
						<text class="icon">￥</text>
						<text class="num">5</text>
					</template>
					<template v-if="item.equityType == 2">
						<text class="video">视频会员</text>
					</template>
				</view>

				<view class="content-detail">
					<view class="detail-name">{{ item.equityName ? item.equityName : item.portfolioName }}</view>
					<view class="detail-time">有效期{{ item.effectiveTime }}-{{ item.expireTime }}</view>
				</view>
				<!-- receiveStatus 领取状态 1 && 当前时间在有效时间范围内 未领取 有操作  -->
				<!-- receiveStatus 领取状态 1 && 当前时间小于生效时间 未到时间  无操作-->
				<!-- receiveStatus 领取状态 1 && 当前时间大于过期时间   已过期 无操作-->

				<!-- receiveStatus 领取状态 2 &&   领取中 无操作-->
				<!-- receiveStatus 领取状态 3 &&   领取成功 无操作-->
				<!-- receiveStatus 领取状态 4 &&   领取失败 -->
				<view class="right-btn">
					<view class="number">{{ parseInt(item.annualPayNum) }} 期</view>
					<view class="content-btn" v-if="item.receiveStatus == 1">
						<template v-if="haveOperate(item) == '未领取'">
							<button class="get-ticket" @click="getTiket(item)">{{ haveOperate(item) }}</button>
						</template>
						<template v-else>
							<!-- <button @click="getTiket(item)">{{ haveOperate(item) }}</button> -->
							{{ haveOperate(item) }}
						</template>
					</view>
					<view v-else-if="item.receiveStatus == 2" class="content-load">{{ status[item.receiveStatus] }}</view>
					<view v-else-if="item.receiveStatus == 3" class="content-success">{{ status[item.receiveStatus] }}</view>
					<view v-else-if="item.receiveStatus == 4" class="content-error">
						<button @click="getTiket(item)" class="get-ticket">
							{{ status[item.receiveStatus] }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</template>
	<template v-else>
		<up-empty mode="coupon" icon="/static/tabs/coupon.png"></up-empty>
	</template>
</template>

<script setup>
import dayjs from 'dayjs';
import { customDebounce } from '@/utils/commo.js';

import { constStore } from '@/store/const.js';
//引入防抖函数
const { constInfo } = constStore();
const status = ['', '未领取', '领取中', '领取成功', '领取失败'];
const emit = defineEmits(['getTiket']);
const props = defineProps({
	pageParams: {
		type: Object,
		default: () => {}
	}
});
const getTiket =customDebounce((item)=>{
	emit('getTiket', item);
	// console.log("item",item);
},1000) 
const haveOperate = (item) => {
	/* receiveStatus 领取状态 1 && 当前时间在有效时间范围内 未领取 有操作  
		 receiveStatus 领取状态 1 && 当前时间 早于 生效时间 未到时间  无操作 effectiveTime
		 receiveStatus 领取状态 1 && 当前时间大于过期时间   已过期 无操作 expireTime  */

	const time1 = item.effectiveTime; // 8yue
	const time2 = item.expireTime; // 9yue
	const nowTime = dayjs(new Date()).format('YYYY-MM-DD HH:ss:mm');
	const dayjsTime1 = dayjs(time1);
	const dayjsTime2 = dayjs(time2);
	const dayjsTime3 = dayjs(nowTime);
	if (dayjsTime3.isBefore(dayjsTime1)) {
		return '未到时间';
	} else if (dayjsTime3.isAfter(dayjsTime2)) {
		return '已过期';
	} else if (dayjsTime3.isAfter(dayjsTime1) && dayjsTime3.isBefore(dayjsTime2)) {
		return '未领取';
	} else {
		return '错误时间';
	}
};
</script>

<style lang="scss" scoped>
.b-left-money {
	position: relative;
	margin-top: 10rpx;
	height: 146rpx;
	.writeOff {
		position: absolute;
		left: 35rpx;
		z-index: 100;
		top: 20rpx;
	}
	.money-content {
		.right-btn {
			width: 200rpx;
			.number {
				text-align: center;
				// background-color: red;
				// display: flex;

				margin-top: 10rpx;
				margin-bottom: 20rpx;
			}
			.content-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20rpx;
				button {
					width: 150rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 20rpx;
					background-color: #6082ce;
					border-radius: 100rpx;
					color: #fff;
				}
			}
			.content-load {
				color: #71d5a1;
				font-size: 20rpx;
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.content-success {
				color: #19be6b;
				font-size: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.content-error {
				color: #dd6161;
				display: flex;
				justify-content: center;
				align-items: center;
				button {
					font-size: 20rpx;
					border-radius: 100rpx;
					background-color: #6082ce;
					border-radius: 100rpx;
					width: 150rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}

		.content-left {
			width: 210rpx;
			text-align: center;
			line-height: 146rpx;
			.icon {
				color: #fff;
			}
			.num {
				font-size: 70rpx;
				color: #fff;
				font-weight: 600;
			}
			.video {
				font-size: 30rpx;
				color: #fff;
				font-weight: 600;
			}
		}
		.content-detail {
			width: 350rpx;
			font-size: 20rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.detail-name {
				font-size: 22rpx;
				font-weight: 600;
			}
			.detail-time {
				font-size: 12rpx;
			}
			view {
				line-height: 40rpx;
			}
		}
		position: absolute;
		top: 0;
		width: 700rpx;
		height: 146rpx;
		left: 25rpx;
		display: flex;
	}
}
</style>
